<template>
    <el-form-item label="供应商" prop="supplierName">
        <el-input v-model="supplier" :placeholder="supplierName"></el-input>
        <el-button type="text" size="medium" class="del-query-tree-btn" @click="querySupplier">查找</el-button>
        <el-dialog title="选择供应商" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" append-to-body>
            <el-row :gutter="10" class="SupplierList">
                <el-col :span="8" v-for="(item,index) in list" :key="index"><a class="item" @click="chooseSupplier(item.name,item.id)"><span>{{item.name}}</span></a></el-col>
            </el-row>
        </el-dialog>
    </el-form-item>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "SupplierPicker",
  props: {
    supplierName: {
      default:"未指定供应商"
    }
  },
  data() {
    return {
      dialogVisible: false,
      list: [],
      supplier:""
    };
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    querySupplier() {
      this.getSupplierList();
      this.dialogVisible = true;
    },
    chooseSupplier(name, id) {
      new Promise((resolve, reject)=>{
          this.supplier = name;
          this.dialogVisible = false;
          resolve({
            id:id,
            name:name
          });
      }).then(data=>{
          console.log(data);
          this.supplier = data.name;
          this.$emit("getSupplierId",data);
      })
    },
    getSupplierList() {
      //获取用户列表
      request({
        method: "get",
        url: this.$api.querySupplierForPage + `?condition=&limit=1000&offset=1`
      }).then(res => {
        this.list = res.data.list;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.del-query-tree-btn {
  position: absolute;
  right: -40px;
  top: 0;
}

.SupplierList {
  height: 300px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid #ddd;
  a.item {
    padding: 5px 5px;
    display: flex;
    align-items: center;
    height: 20px;
    span {
      white-space: nowrap;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
    }
  }
  a.item::before {
    content: "";
    width: 3px;
    height: 3px;
    background: #b3b3b3;
    margin-right: 5px;
    border-radius: 4px;
  }
  a.item:hover {
    cursor: pointer;
    background: #f4f4f4;
  }
}
</style>